<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <!-- <link rel="stylesheet" href="./css/loaders.min.css" /> -->
    <title><%= webpackConfig.name %></title>
    <script>
      if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        location.replace("/mobile.html");
      }
    </script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= webpackConfig.name %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app">
      <div class="loading">
        <div class="content">
          <div class="loaader" style="height: 50px;">
            <div
              class="ball-scale-ripple-multiple"
              style="display: inline-block;"
            >
              <div style="border-color: #2D8cF0;"></div>
              <div style="border-color: #2D8cF0;"></div>
              <div style="border-color: #2D8cF0;"></div>
            </div>
          </div>
          <div>正在执行初始化工作...</div>
        </div>
      </div>
      <style>
        html,
        body {
          height: 100%;
          background: #f0f0f0;
          font-family: "Helvetica Neue", Helvetica, "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial,
            sans-serif;
          font-size: 14px;
          line-height: 1.5;
          color: #515a6e;
          overflow: hidden;
          -webkit-font-smoothing: antialiased;
        }
        #app {
          height: 100%;
        }
        .loading {
          height: 100%;
          text-align: center;
        }
        .loading::after {
          content: "";
          height: 100%;
          display: inline-block;
          vertical-align: middle;
        }
        .content {
          display: inline-block;
          vertical-align: middle;
        }
        @-webkit-keyframes ball-scale-ripple-multiple {
          0% {
            -webkit-transform: scale(0.1);
            transform: scale(0.1);
            opacity: 1;
          }
          70% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0.7;
          }
          100% {
            opacity: 0;
          }
        }
        @keyframes ball-scale-ripple-multiple {
          0% {
            -webkit-transform: scale(0.1);
            transform: scale(0.1);
            opacity: 1;
          }
          70% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0.7;
          }
          100% {
            opacity: 0;
          }
        }
        .ball-scale-ripple-multiple {
          position: relative;
          -webkit-transform: translateY(-25px);
          -ms-transform: translateY(-25px);
          transform: translateY(-25px);
        }
        .ball-scale-ripple-multiple > div:nth-child(0) {
          -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
        }
        .ball-scale-ripple-multiple > div:nth-child(1) {
          -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
        }
        .ball-scale-ripple-multiple > div:nth-child(2) {
          -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
        }
        .ball-scale-ripple-multiple > div:nth-child(3) {
          -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
        }
        .ball-scale-ripple-multiple > div {
          position: absolute;
          top: -2px;
          left: -26px;
          width: 50px;
          height: 50px;
          border-radius: 100%;
          border: 2px solid #fff;
          -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite
            cubic-bezier(0.21, 0.53, 0.56, 0.8);
          animation: ball-scale-ripple-multiple 1.25s 0s infinite
            cubic-bezier(0.21, 0.53, 0.56, 0.8);
        }
      </style>
    </div>
    <!-- import cdn js -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>
